<template>
  <view>
    <u-navbar title="旅游订单" :border-bottom="false" back-icon-size="48"></u-navbar>
    <u-tabs :list="tabList" :is-scroll="false" active-color="#333333" bar-height="4" bar-width="64"
            :bar-style="barStyle" :current="current" @change="tabChange" :bold="false"></u-tabs>
    <view class="content">
      <view class="content-li" v-for="(item,index) in tripList" :key="index">
        <view class="typeBox">
          <view class="type">
            爱世界{{ item.type_name }}
          </view>
          <view class="status">
            {{ item.status_name }}
          </view>
        </view>
        <view class="travelBox" @click="navTo('./detail?id='+item.order_id)">
          <image :src="item.icon" mode=""></image>
          <view class="info">
            <view class="title">
              {{ item.title }}
            </view>
            <view class="time">
              出发时间:{{ item.start_date }}
            </view>
            <!-- <view class="tip">
              套餐包含：1成人
            </view> -->
          </view>
          <view class="num">
            x1
          </view>
        </view>
        <view class="price">
          <text class="tit" v-if="item.is_vip != 0">VIP专享</text>
          <text class="num">¥{{ item.order_amount }}
          </text>
        </view>
        <view class="btnBox">
          <view class="btn" v-if="item.pay_status ==0" @click="do_pay(item.pay_id)">
            去支付
          </view>
          <view class="btn" v-if="item.pay_status ==1" @click="navTo('./infoMation?id='+item.order_id)">
            补充信息
          </view>
          <view class="btn" v-if="item.status_name == '已完成'">
            去评价
          </view>
          <view class="btn" @click="cancelOrder(item)" v-if="item.status_name != '已完成'">
            取消行程
          </view>
          <view class="btn" v-if="item.status_name == '已完成'">
            删除订单
          </view>
        </view>
      </view>
    </view>
    <u-popup v-model="showPay" mode="bottom" :closeable="true" border-radius="16">
      <view class="payPop">
        <view class="title">
          选择支付方式
        </view>
        <view class="pay-ul">
          <view class="pay-li">
            <view class="pay-li-left">
              <image src="../../../../static/imgs/weixinzf.png" mode=""></image>
              <text>微信</text>
            </view>
            <u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
          </view>
          <view class="pay-li">
            <view class="pay-li-left">
              <image src="../../../../static/imgs/zhifubaozf.png" mode=""></image>
              <text>支付宝</text>
            </view>
            <u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
          </view>
        </view>
        <view class="pay" @click="confirmPay">
          支付
        </view>
      </view>
    </u-popup>
    <u-popup v-model="show_cancel" mode="center" :closeable="false" border-radius="16">
      <u-row class="can-box" gutter="16" justify="center">
        <u-col span="12" class="can-title" text-align="center">
          取消行程
        </u-col>
        <u-col span="12" class="can-content" text-align="center">
          {{ cancel_msg }}
        </u-col>
        <u-col span="12" text-align="center">
          <view class="can-button">
            <u-button plain class="can-b-b" :hair-line="false" @click="show_cancel = false">
              返回
            </u-button>
          </view>
          <view class="can-b-c"></view>
          <view class="can-button">
            <u-button plain class="can-b-b" :hair-line="false" @click="confirmCancel">
              确认取消
            </u-button>
          </view>
        </u-col>
      </u-row>
    </u-popup>
    <u-popup v-model="show_cancel_msg" mode="center" :closeable="false" border-radius="16">
      <u-row class="can-box" gutter="16" justify="center">
        <u-col span="12" class="can-title" text-align="center">
          取消行程说明
        </u-col>
        <u-col span="12" class="can-content-p">
          <view class="can-p">
            <view class="can-p-l">旅游行程款</view>
            <view class="can-p-r">¥{{ cancel_data.total }}</view>
          </view>
          <view class="can-p">
            <view class="can-p-l">取消损失费</view>
            <view class="can-p-r">¥{{ cancel_data.service_charge }}</view>
          </view>
          <view class="can-m">
            当前时间距离路线出发时间前六日，收取损失
            费{{ cancel_data.service_charge_rate }}%
          </view>
        </u-col>
        <u-col span="12" class="can-content-o can-content-p">
          <view class="can-p">
            <view class="can-p-l">预计应退金额</view>
            <view class="can-p-r can-p-rx">¥{{ cancel_data.cash_refund }}</view>
          </view>
          <view class="can-m can-m-x">*取消行程损失费最终退款金额以i世界实退为准。</view>
          <view class="can-m can-m-x">*取消后无法立即重复提交相同订单。</view>
        </u-col>
        <u-col span="12" text-align="center">
          <view class="can-button">
            <u-button class="can-b-e"  @click="show_cancel_msg = false">
              再想想
            </u-button>
          </view>
          <view class="can-b-c"></view>
          <view class="can-button">
            <u-button plain class="can-b-d" :hair-line="false" @click="confirmCancelTo">
              确认取消
            </u-button>
          </view>
        </u-col>
      </u-row>
    </u-popup>
  </view>
</template>
<script>
import myRequest from '@/api/index.js'
import oRequest from '@/api/order.js'

export default {
  data() {
    return {
      current    : 0,
      barStyle   : {
        background: 'linear-gradient(180deg, #6ABCFC 0%, #048FFE 100%)'
      },
      tabList    : [{
        name: '全部',
        type: '0'
      },
                    {
                      name: '待付款',
                      type: '4'
                    },
                    {
                      name: '待出行',
                      type: '1'
                    },
                    {
                      name: '待评价',
                      type: '5'
                    }
      ],
      page       : 1,
      tripList   : [],
      showPay    : false,
      weiPaycheck: false,
      alPaycheck : false,
      show_cancel : false,
      show_cancel_msg : false,
      pay_id     : 0,
      payCode:'6004',
      type:0,
      cancel_msg:'确认取消该行程吗？',
      c_id:0,
      if_fxq:false,
      total_price:'0.00',
      cancel_data:{
        total:'0.00',
        service_charge:'0.00',
        service_charge_rate:'20',
        cash_refund:'0.00',
      }
    }
  },
  onReachBottom() {
    this.page++
    this.getMytrip()
  },
  onLoad() {
    this.getMytrip()
  },
  methods: {
    async getMytrip() {
      let {
            page,type
          }   = this
      let res = await myRequest.getMyTravel({
                                              page         : page,
                                              travel_status: type
                                            })
      if (res.status) {
        this.tripList = [...this.tripList, ...res.data]
      }
    },
    navTo(url) {
      uni.navigateTo({
                       url: url
                     })
    },
    tabChange(index) {
      this.current  = index
      this.page     = 1
      this.tripList = []
      this.type = index === 0 ? 0 : (index === 1 ? 4 : (index === 2 ? 1 : (index === 3 ? 5:0)))
      this.getMytrip()
    },
    confirmPay() {
      uni.navigateTo({
                       url: '../../../homePage/pay/pay?payCode=' + this.payCode + '&payId=' + this.pay_id
                     })
      this.showPay = false
    },
    weiChange(e) {
      if (e.value) {
        this.alPaycheck = false
        this.payCode = '6004'
      }
    },
    aliChange(e) {
      if (e.value) {
        this.weiPaycheck = false
        this.payCode = '6005'
      }
    },
    cancelOrder(val) {
      this.c_id = val.order_id
      //判断出发日期

      let start_date = new Date(val.start_date).getTime()
      let now = new Date().getTime()
      let day_num = (start_date - now) / (86400 * 1000)
      if(day_num < 6){
        this.cancel_msg = '行程前取消订单将会扣除部分违约金，确认取消吗？'
        this.if_fxq = true
        this.total_price = val.total_amount
        this.set_total()
      }else{
        this.cancel_msg = '确认取消该行程吗？'
      }
      this.show_cancel = true
      // uni.showModal({
      //                 title  : '取消订单',
      //                 content: '是否要取消该订单？取消后将退还旅游基金和福利金',
      //                 success: function (res) {
      //                   if (res.confirm) {
      //
      //                   }
      //                 }
      //               })
    },
    async set_total(){
      let id = this.c_id
      let res = await oRequest.getCancelRate({order_id:id})
      if(res.status){
        this.cancel_data = res.data
      }
    },
    confirmCancel(){
      if(this.if_fxq){
        this.if_fxq = false
        this.show_cancel_msg = true
      }else{
        this.sendCancel()
      }
      this.show_cancel = false
    },
    confirmCancelTo(){
      this.sendCancel()
      this.show_cancel_msg = false

    },
    do_pay(value) {

      this.showPay = true
      this.pay_id = value
    },
    async sendCancel() {
      console.log(1)
      let id = this.c_id
      let res = await oRequest.cancelOrder({order_id: id})
      uni.showToast({
                      title: res.msg,
                      icon:'none'
                    })
      if (res.status) {
        setTimeout(() => {
          this.page     = 1
          this.tripList = []
          this.getMytrip()
        }, 2000)
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.can-box{
  width:600rpx;
  height:auto;
  padding:40rpx 28rpx;
  font-family: Segoe UI;

  .can-title{
    color:#333333;
    font-weight:bold;
    font-size:32rpx;
  }
  .can-content{
    color:#666666;
    margin-top:56rpx;
    font-size:28rpx;
    font-weight:400;
  }
  .can-button{
    width:47%;
    display:inline-block;
    padding:56rpx 0 0 0;
    .can-b-b{
      height:64rpx;
      border: 2rpx solid #3587F7;
      color:#3587F7;
      font-size:28rpx;
      font-weight:400;
    }
    .can-b-d{
      color:#666666;
      background: #F5F5F5;
      font-size: 32rpx;
      border:none;
    }
    .can-b-e{
      background: #3587F7;
      color:#FFFFFF;
      font-size: 32rpx;
    }
  }
  .can-b-c{
    width:6%;
    display:inline-block;
    padding:56rpx 0 0 0;
  }

  .can-content-p{
    margin-top:30rpx;
    .can-p{
      width:100%;
      padding:14rpx 0;
      //display:inline-block;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .can-p-l{
        width:50%;
        color:#666666;
        font-size: 28rpx;
        font-weight: 400;
      }
      .can-p-r{
        font-weight: 400;
        color: #333333;
        width:50%;
        text-align:right;
      }
      .can-p-rx{
        color: #F57426;
      }
    }
    .can-m{
      font-weight: 400;
      font-size: 24rpx;
      color: #999999;
      padding:10rpx 0;
    }
    .can-m-x{
      color: #666666;
    }
  }
  .can-content-o{
    border-top: 1px solid #F2F2F7;
  }

}
.content {
  padding: 0 20rpx 20rpx;

  .content-li {
    width: 710rpx;
    height: auto;
    background-color: #FFF;
    border-radius: 16rpx;
    padding: 0 20rpx;
    margin-top: 20rpx;

    .typeBox {
      width: 100%;
      height: 88rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .type {
        font-size: 28rpx;
        font-family: Arial;
        font-weight: 400;
        color: #333;
      }

      .status {
        font-size: 28rpx;
        font-family: Arial;
        font-weight: 400;
        color: #FF4600;
      }
    }

    .travelBox {
      display: flex;

      image {
        width: 160rpx;
        height: 160rpx;
        border-radius: 16rpx;
      }

      .info {
        margin-left: 18rpx;
        width: 65%;

        .title {
          font-size: 30rpx;
          font-family: Segoe UI;
          font-weight: 400;
          color: #333;
        }

        .time {
          margin-top: 4rpx;
          font-size: 24rpx;
          font-family: Arial;
          font-weight: 400;
          color: #999;
        }

        .tip {
          margin-top: 4rpx;
          font-size: 24rpx;
          font-family: Arial;
          font-weight: 400;
          color: #999;
        }
      }

      .num {
        margin-left: auto;
      }
    }

    .price {
      width: 100%;
      height: 88rpx;
      text-align: right;
      line-height: 88rpx;

      .tit {
        font-size: 24rpx;
        font-family: Segoe UI;
        font-weight: 400;
        color: #666;
        margin-left: 20rpx;
      }

      .num {
        margin-left: 6rpx;
        font-size: 32rpx;
        font-family: Segoe UI;
        font-weight: 400;
        color: #333;
      }
    }

    .btnBox {
      width: 100%;
      height: 100rpx;
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .btn {
        margin-left: 20rpx;
        width: 176rpx;
        height: 60rpx;
        border: 2rpx solid rgba(153, 153, 153, 0.4);
        border-radius: 40rpx;
        line-height: 60rpx;
        text-align: center;
        font-size: 28rpx;
        font-family: Segoe UI;
        font-weight: 400;
        color: #666;
      }
    }
  }
}
.payPop {
  padding-bottom: 20rpx;

  .title {
    width: 375rpx;
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }

  .pay-ul {

    .pay-li {
      width: 694rpx;
      height: 100rpx;
      background: #FFF;
      margin: 0 auto;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .pay-li-left {
        display: flex;
        align-items: center;

        image {
          width: 44rpx;
          height: 44rpx;
        }

        text {
          font-size: 32rpx;
          font-family: Alibaba Sans;
          font-weight: 400;
          color: #333;
          margin-left: 20rpx;
        }
      }

    }
  }

  .pay {
    width: 694rpx;
    height: 88rpx;
    background: linear-gradient(56deg, #FEA837 0%, #F70 100%);
    margin: 0 auto;
    border-radius: 8rpx;
    font-size: 40rpx;
    font-family: Arial;
    font-weight: 400;
    color: #FFF;
    line-height: 88rpx;
    text-align: center;
    margin-top: 40rpx;
  }
}
</style>
